<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title>liuboy .起点.</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2531843_db7g6z3cnbl.css"/>
		<style>
			ul{
				list-style:none;
			}
			a{
				text-decoration:none;
			}
			.jilu{
				padding:0.3125rem 0.3125rem;
				font-size:.8rem;
				background:#f5f5f5;
				border-radius:0.3125rem;
			}
			.jiluTitle{
				display:inline-block;
				padding:0 0.3125rem ;
				border-radius:0.3125rem;
				color:#fff;
				background:#3CB371;
			}
			.jiluTime{
				font-size:.6rem;
				color:#ccc;
			}
			.page{
				margin:0.625rem 0;
				padding:0.3125rem;
				font-size:.8rem;
				background:#ccc;
				border-radius:0.3125rem;
			}
			ol{
				padding:0.3125rem 1.25rem;
				margin:0;
				color:#f5f5f5;
			}
			ol li{
				border-bottom:1px dotted seagreen;
			}
			ol li:nth-child(1){
				width:50%;
			}
			ol li:nth-child(2){
				width:60%;
			}
			ol li:nth-child(3){
				width:70%;
			}
			ol li:nth-child(4){
				width:80%;
			}
			ol li:nth-child(5){
				width:90%;
			}
			ol li:nth-child(6){
				width:100%;
			}
			.page a{
				padding:0.3125rem 0.3125rem;
				color:seagreen;
			}
			.pageTitle{
				display:inline-block;
				padding:0 0.3125rem ;
				border-radius:0.3125rem;
				color:#fff;
				background:#3CB371;
			}
			.footer{
				font-size:.9rem;
				text-align:center;
			}
			/*手机端*/
			@media screen and (max-width:429px){
				.header{
					display:flex;
					width:100%;
					flex-wrap:wrap;
				}
				.title{
					width:90%;
				}
				i{
					width:10%;
				}
				.nav{
					width:100%;
					height:0;
					margin:.75rem 0;
					overflow:hidden;
					transition:height .3s linear 0s;
					background:rgba(46,139,87,1);
					border-radius:.375rem;
				}
				ul{
					padding:0 2.5rem;
					margin:0.625rem 0;
				}
				.nav li{
					width:100%;
					margin:3px 0;
					line-height: 1.3rem;
					background:rgba(211,211,211,.1);
					border-radius:3px;
				}
				.nav li:nth-child(2){
					width:95%;
				}
				.nav li:nth-child(3){
					width:90%;
				}
				.nav a{
					padding-left:0.9375rem;
					font-size:.9rem;
					color:#000;
				}
				.nav a i{
					font-size:.8rem;
					color:#ccc;
				}
				
			}
			/*电脑端*/
			@media screen and (min-width:480px){
				*{
					margin:0;
					padding:0;
				}
				html{
					font-size:22px;
				}
				.header i{
					display:none;
				}
				ul{
					overflow:hidden;
					width:91%;
					height:50px;
					margin:10px auto;
					background:rgba(46,139,87,1);
				}
				ul li{
					float:left;
				}
				.jilu{
					clear:both;
				}
				ul li a{
					line-height:50px;
					color:#fff;
				}
				.jilu,.page{
					width:90%;
					margin:10px auto;
				}
			}
		</style>
	</head>
	<body>
	<div class="header">
		<div class="title"> liuboy 起点</div>
		<i>三</i>
		<div class="nav">
			<ul>
				<li><a href="index.html"><i class="iconfont icon-zhuye"></i>&nbsp;主页</a></li>
				<li><a href="jilu.html"><i class="iconfont icon-jilu1"></i>&nbsp;记录</a></li>
				<li><a href="pages.html"><i class="iconfont icon-wenzhang"></i>&nbsp;文章</a></li>
			</ul>
		</div>
	</div>
	
	<!--记录-->
	<div class="jilu">
		<div class="jiluTitle">记录</div>
		<div class="jiluInfo">
			
		</div>
	</div>
	
	<!--文章-->
		<div class="page">
			<div class="pageTitle">文章</div>
				<div class="pageList">
					<ol>
						
					</ol>
				</div>
		</div>
		
		<!--尾部-->
		<div class="footer">
			<i>版权所有</i>
		</div>
	</body>
	<script src="./ajax.js"></script>
	<script>
		var $ = (el)=>{return document.querySelector(el)}
		//移动端导航栏动画
		var i = $("i")
		var nav = $(".nav")
		var jiluInfo = $(".jiluInfo")
		var ol = $('ol')
		i.addEventListener("click",()=>{if(nav.style.height=='5.625rem'){nav.style.height='0'}else{nav.style.height=5.625+'rem'};})
		//ajax请求后台数据
		//请求文章数据
		ajax({
			url:'http://localhost:3000/pages',
			type:'GET',
			async:true,
			data:{},
			success:function(data){
				console.log(data)
				//拿到数据操作dom
				//将json字符串转换成json对象
				var dataJson = JSON.parse(data)
				for(j=0;j<dataJson.length;j++){
					var li = document.createElement('li')
					var a = document.createElement('a')
					a.href = './pageInfo.html?id='+dataJson[j].id
					a.innerHTML = dataJson[j].title
					li.appendChild(a)
					ol.appendChild(li)
				}
			}
		})
		//请求记录数据
		ajax({
			url:'http://localhost:3000/jilu',
			async:true,
			type:'GET',
			data:{},
			success:function(jiluData){
				
				console.log(jiluData)
				//将json字符串转化为json对象
				var jiluDataJson = JSON.parse(jiluData)
				//拿到数据根据数据操作dom
				for(i=0;i<jiluDataJson.length;i++){
				var jiluContent = document.createElement('div')
				jiluContent.className = 'jiluContent'
				jiluContent.innerHTML=jiluDataJson[i].content
				var jiluTime = document.createElement('div')
				jiluTime.className = 'jiluTime'
				jiluTime.innerHTML = jiluDataJson[i].createtime
				jiluInfo.appendChild(jiluContent)
				jiluInfo.appendChild(jiluTime)
				}
				
			}
		})
	</script>
</html>
